import { GStyleSheet } from '@/utils/DarkMode';
import { View } from '@tarojs/components';
import { PropsWithChildren } from '@tarojs/taro';
import { CSSProperties } from 'react';

const dstyles = GStyleSheet.create({
  container: {
    position: 'fixed',
    width: '100vw',
    height: '100vh',
    backgroundColor: 'rgba(0,0,0,0)',
    top: 0,
    left: 0,
    // zIndex: 9999,
  },
  background: {
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

interface IModalProps {
  visible?: boolean;
  style?: CSSProperties;
  mask?: boolean;
  zIndex?: number;
}

/**
 * Modal的zIndex=999 遮不住顶部navBar
 * zIndex=9999 遮住navBar 遮不住胶囊按钮
 * 默认是999 故障弹窗9999
 */
function Modal({ style, children, visible, mask, zIndex = 999 }: PropsWithChildren<IModalProps>) {
  const styles = dstyles.useDynamicStyle();

  return visible ? (
    <View className='centerFlex' style={{ ...styles.container, zIndex, ...style, ...(mask ? styles.background : {}) }}>
      {children}
    </View>
  ) : null;
}

export default Modal;
